<template>
  <div class="info">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-image :src="loginUser.avatar"></el-image>
          </div>
          <div style="display: flex; justify-content: center" class="text item">
            <el-upload
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :action="BASE_URL"
              class="avatar-uploader"
              >
              <el-button>更换头像</el-button>
            </el-upload>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div style="display: flex; justify-content: center" class="text item">
            <el-form
              label-position="left"
              label-width="80px"
              :model="loginUser"
              style="width: 60%"
            >
              <el-form-item label="账号" prop="username">
                <el-input v-model="loginUser.username"></el-input>
              </el-form-item>
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="loginUser.nickname"></el-input>
              </el-form-item>
              <el-form-item label="个性签名">
                <el-input
                  type="textarea"
                  v-model="loginUser.signature"
                ></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="loginUser.gender">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="所在省份" prop="address">
                <el-select
                  v-model="loginUser.address"
                  placeholder="请选择所在省份"
                >
                  <el-option
                    v-for="(item, index) in cityList"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-button @click.prevent.native="update">更新信息</el-button>
            </el-form>
          </div>
        </el-card>
        <el-card style="margin-top: 2px" class="box-card">
          <div slot="header" class="clearfix">
            <span>账号安全</span>
          </div>
          <div class="clearfix">
            <span
              ><i style="padding-right: 5px" class="el-icon-user"></i>密码</span
            >
            <el-button
              @click="dialogFormVisible = true"
              style="float: right; padding: 3px 0"
              type="text"
              >修改密码</el-button
            >
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
      <el-card style="margin-top: 2px" class="box-card">
        <div slot="header" class="clearfix">
          <span>账号安全</span>
          <span style="float: right; padding: 3px 0; color: red" type="text">{{
            errorMsg
          }}</span>
        </div>
        <div class="clearfix">
          <el-form class="demo-ruleForm">
            <el-form-item
              label="旧密码"
              :label-width="formLabelWidth"
              prop="oldPassword"
            >
              <el-input v-model="oldPassword"></el-input>
            </el-form-item>
            <el-form-item
              label="新密码"
              :label-width="formLabelWidth"
              prop="newPassword"
            >
              <el-input v-model="newPassword"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePassword">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCity } from "@/utils/city";
import user from "@/api/user";
import store from "@/store";

export default {
  data() {
    return {
      BASE_URL: process.env.VUE_APP_BASE_API + "/weddingoss/fileoss/uploadFile",
      url: "eduoss/fileoss/uploadFile",
      loginUser: {},
      cityList: [],
      dialogFormVisible: false,
      formLabelWidth: "120px",
      newPassword: "",
      oldPassword: "",
      errorMsg: "",
    };
  },

  watch: {
    dialogFormVisible() {
      if (!this.dialogFormVisible) {
        this.oldPassword = "";
        this.newPassword = "";
      }
    },
  },

  created() {
    this.init();
    this.cityList = getCity();
  },

  methods: {
    init() {
      this.loginUser.username = this.$store.state.user.username;
      this.loginUser.gender = this.$store.state.user.gender;
      this.loginUser.address = this.$store.state.user.address;
      this.loginUser.signature = this.$store.state.user.signature;
      this.loginUser.userId = this.$store.state.user.userId;
      this.loginUser.avatar = this.$store.state.user.avatar;
      this.loginUser.nickname = this.$store.state.user.nickname;
      this.loginUser = JSON.parse(JSON.stringify(this.loginUser));
    },
    handleAvatarSuccess(res) {
      this.loginUser.avatar = res.data.url;
      user.updateUser(this.loginUser).then((res) => {
        if (res.success) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          store.commit("setAvatar", this.loginUser.avatar);
        } else {
          this.$message({
            message: "失败，请稍后重试",
            type: "error",
          });
        }
      });
      this.loginUser.avatar = res.data.url;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    update() {
      user.updateUser(this.loginUser).then((res) => {
        if (res.success) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          store.commit("setInfo", this.loginUser);
        } else {
          this.$message({
            message: "失败，请稍后重试",
            type: "error",
          });
        }
      });
    },
    changePassword() {
      if (
        this.oldPassword.length != 0 &&
        this.newPassword.length != 0 &&
        this.oldPassword !== "" &&
        this.oldPassword !== undefined &&
        this.newPassword !== "" &&
        this.newPassword !== undefined
      ) {
        if (this.newPassword.length < 4 || this.newPassword.length > 16) {
          this.errorMsg = "新密码长度在4 - 16之间";
        } else {
          this.errorMsg = "";
          this.loginUser.password = this.oldPassword;
          user.verifyPassword(this.loginUser).then((res) => {
            if (res.data.matches) {
              this.loginUser.password = this.newPassword;
              console.log(this.newPassword);
              console.log(this.loginUser);
              user.updatePassword(this.loginUser).then((res) => {
                if (res.success) {
                  this.$message({
                    message: "修改成功",
                    type: "success",
                  });
                  this.dialogFormVisible = false;
                  this.oldPassword = "";
                  this.newPassword = "";
                } else {
                  this.$message({
                    message: "修改失败",
                    type: "error",
                  });
                  this.oldPassword = "";
                  this.newPassword = "";
                }
              });
            } else {
              this.errorMsg = "旧密码错误";
            }
          });
        }
      } else {
        this.errorMsg = "请输入密码";
      }
    },
  },
};
</script>

<style scoped>
.info {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>